import { useContext } from 'react';
import { ContractManageAPI } from '../common/type';
import { Col, Empty, Row, Spin, Timeline, Button, Tooltip } from 'antd';
import ScrollBarLayout from '@/components/ScrollBarLayout';
import { ConractControllerContext } from '../common';
import { readReadShowFileService } from '@/services/BaseLayout';
import { getBaseUrl } from '@/services/urlconst';
import { DownloadOutlined } from '@ant-design/icons';
import { downloadTemplate } from '@/utils';

export const DetailInfoViewTabsPaymentItem: React.FC<ContractManageAPI.IDetailInfoViewTabsItemPayment> = ({ data, loading }) => {
  /**引入上下文 */
  const { styleFixCls } = useContext(ConractControllerContext);
  /** 轻阅读预览 */
  const { readReadShowFileRun } = readReadShowFileService();

  /**轻阅读预览 */
  const onOpenReadOfdWord = (fieldUrl: string) => {
    readReadShowFileRun({ fieldPath: `${getBaseUrl()}${fieldUrl}` });
    // readReadShowFileRun({ fieldPath: `http://222.186.101.211:20103${fieldUrl}` });
  };

  return (
    <Spin spinning={loading}>
      <div className="commonTabsBodyDom">
        <div className={'tabsBodyInfoDom'}>
          {data?.length > 0 ? (
            <ScrollBarLayout style={{ padding: '0' }}>
              <div className={styleFixCls + 'contractTimeLineSty'}>
                <Timeline>
                  {data?.map((item: any, index: number) => {
                    return (
                      <Timeline.Item key={`${item?.id}-${index}`}>
                        <div style={{ margin: '5px 0px' }}>
                          <span className={styleFixCls + 'contractTimeLineSty-titleTimeBoxSty'}>
                            {item?.storageID ? item?.checkTime : item?.payTime || '--'}
                          </span>
                          &nbsp;{item?.storageID ? '验收，验收' : '收支，收支'}情况如下：
                        </div>
                        {!item?.storageID ? (
                          <div className={`${styleFixCls}contractTimeLineSty-agreeBodyBox`} style={{ padding: '10px' }}>
                            <Row gutter={[12, 0]} className={`${styleFixCls}contractTimeLineSty-agreeBodyBox-rowBox`}>
                              <Col span={24}>
                                <dt>付款单号</dt>：<dd>{item?.payOrderNum || '--'}</dd>
                              </Col>
                              <Col span={24}>
                                <dt>本次支付</dt>：
                                <dd>
                                  <span style={{ fontWeight: 700, color: '#096dd9' }}>{item?.sumThisPaid ? `${item?.sumThisPaid}.00` : '0.00'}</span>
                                  &nbsp;元
                                </dd>
                              </Col>
                              <Col span={24}>
                                <dt>事项名称</dt>：<dd>{item?.applyTitle || '--'}</dd>
                              </Col>
                              <Col span={24}>
                                <dt>佐证材料</dt>：
                                <dd>
                                  {item?.applyFile ? (item?.applyFile as string).substring(item?.applyFile.lastIndexOf('/') + 1) : '--'}
                                  {item?.applyFile && (
                                    <Tooltip title={'下载'}>
                                      <Button
                                        type="link"
                                        size="small"
                                        onClick={() => {
                                          downloadTemplate(
                                            '/contractController/downloadFile',
                                            (item?.applyFile as string).substring(item?.applyFile.lastIndexOf('/') + 1),
                                            item?.applyFile,
                                            () => {},
                                          );
                                        }}
                                        icon={<DownloadOutlined />}
                                      />
                                    </Tooltip>
                                  )}
                                </dd>
                              </Col>
                            </Row>
                          </div>
                        ) : (
                          <div className={`${styleFixCls}contractTimeLineSty-agreeBodyBox`} style={{ padding: '10px' }}>
                            <Row gutter={[12, 0]} className={`${styleFixCls}contractTimeLineSty-agreeBodyBox-rowBox`}>
                              {/* <Col span={24}>
                                <dt>验收编号</dt>：<dd>{item?.storageID || '--'}</dd>
                              </Col> */}
                              <Col span={24}>
                                <dt>事项名称</dt>：<dd style={{ fontWeight: 700, color: '#096dd9', cursor: 'pointer' }}>{item?.applyTitle || '--'}</dd>
                              </Col>
                              <Col span={24}>
                                <dt style={{ width: '130px' }}>文件资料是否齐全</dt>：
                                <dd style={{ color: item?.fileAll ? '#096dd9' : 'red' }}>{item?.fileAll ? '是' : '否'}</dd>
                              </Col>
                              <Col span={24}>
                                <dt style={{ width: '130px' }}>备品备件是否齐全</dt>：
                                <dd style={{ color: item?.matarialAll ? '#096dd9' : 'red' }}>{item?.matarialAll ? '是' : '否'}</dd>
                              </Col>
                              <Col span={24}>
                                <dt>收货检验</dt>：<dd>{item?.checkFlag ? '存在一般问题，经现场处理解决' : '合格'}</dd>
                              </Col>
                              <Col span={24}>
                                <dt>佐证材料</dt>：
                                <dd>
                                  {item?.applyFile ? (item?.applyFile as string).substring(item?.applyFile.lastIndexOf('/') + 1) : '--'}
                                  {item?.applyFile && (
                                    <Tooltip title={'下载'}>
                                      <Button
                                        type="link"
                                        size="small"
                                        onClick={() => {
                                          downloadTemplate(
                                            '/contractController/downloadFile',
                                            (item?.applyFile as string).substring(item?.applyFile.lastIndexOf('/') + 1),
                                            item?.applyFile,
                                            () => {},
                                          );
                                        }}
                                        icon={<DownloadOutlined />}
                                      />
                                    </Tooltip>
                                  )}
                                </dd>
                              </Col>
                            </Row>
                          </div>
                        )}
                      </Timeline.Item>
                    );
                  })}
                </Timeline>
              </div>
            </ScrollBarLayout>
          ) : (
            <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description="暂无数据" />
          )}
        </div>
      </div>
    </Spin>
  );
};
